<template>
  <div>
    <h1>toRefs</h1>
    <!-- 
      作用：
            针对的是响应式对象的属性
            将响应式对象包裹的所有属性都变成一个ref对象。则，所有属性成了响应式数据
            解析：将proxy对象中的每一个属性，都变成对应的ref对象。
                  将reactive包裹起来的对象，中的每一个属性，变成ref对象
     -->
     <h1>{{name}}</h1>
     <h1>{{age}}</h1>
     <input type="text" v-model="name"><br>
     <input type="text" v-model="age"><br>
     <h1>{{obj.name}}</h1>
     <h1>{{obj.age}}</h1>
     <input type="text" v-model="obj.name"><br>
     <input type="text" v-model="obj.age"><br>
     <h1>{{name1}}</h1>
     <h1>{{age1}}</h1>
     <input type="text" v-model="name1"><br>
     <input type="text" v-model="age1">
     <h1>{{name2}}</h1>
     <!-- <h1>{{hobby}}</h1>
     <input type="text" v-model="hobby"> -->
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive, toRefs } from 'vue'

export default defineComponent({
  setup () {
    const obj = reactive({//使用了reactive使得obj对象变成响应式的，但是obj里面的属性，还都是普通数据，不是响应式的数据
      name:'tom',
      age:20,
      hobby(){
        console.log('爱好！')
      }
    })
    console.log(obj)//proxy 对象
    console.log(obj.name) // tom 字符串
    obj.hobby()

    //使用 toRefs 将响应式对象obj中的属性值转换成ref对象
    const objToRefs = toRefs(obj)
    console.log(objToRefs)
    console.log(objToRefs.name)
    // 将toRefs转换后的 属性拿出来看是不是响应式的，结果是，因为他是ref对象
    const name2 = objToRefs.name//响应式的
    //测试 方法是不是响应式的  也算是
    // console.log(objToRefs.hobby)
    // const hobby1 = objToRefs.hobby
    

    //
    const name1 = obj.name;
    const age1 = obj.age;
    return {
      obj,
      ...objToRefs,//将对象，数组展开
      name1,
      age1,
      name2,
      // hobby1
    }
  }
})
</script>

<style scoped>

</style>